<template>
  <div>
    <nav-bar>
      <div class="left" slot="left"  @click="goBack()">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div slot="center">修改用户信息</div>
    </nav-bar>
    <div style="padding-top: 45px;font-size: 16px">
      <van-form @submit="onSubmit">
        <van-field
            v-model="userName"
            name="用户名"
            label="用户名"
            placeholder="请填写新用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import {changeUserInfo} from "../../api/profile/profile";
import {Toast} from 'vant'

export default {
  name: "SetUserInfo",
  components:{
    NavBar
  },
  data(){
    return{
      userName:''
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    async onSubmit(){
      const res = await changeUserInfo(this.userName)
      if(res.status === 204){
        Toast.success('修改成功')
        await this.$router.push({path: '/profile'})
        this.userName = ''
      }else {
        Toast.fail('修改失败')
      }
      console.log(res);
    }
  }
}
</script>

<style scoped lang="css">
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
</style>